<template>
  <div class="container">
    <el-card class="box-card">
      <el-row type="flex" justify="start">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline demo-input-size"
          >
            <el-form-item label="关键字" label-width="80px">
              <el-input size="small" v-model="formInline.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="80px">
              <el-select
                size="small"
                v-model="formInline.state"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="cls">清除</el-button>
              <el-button type="primary" size="small" @click="getList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="success" @click="showAddDialog = true"
            ><i class="el-icon-edit"></i> 新增技巧</el-button
          >
        </el-col>
      </el-row>
      <el-alert type="info" :closable="false">
        <i class="el-icon-info"></i>
        数据一共 {{ page.total }} 条
      </el-alert>
      <el-table :data="tableData" style="width: 100%; margin-top: 16px">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="{ row }">
            {{ row.title}}
            <el-link v-if="row.videoURL !== null" :underline="false" @click="playVideo(row)"><i class="el-icon-film" style="color:rgb(0, 0, 255);font-size=20px" ></i ></el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="录入人"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="createTime" label="录入时间" min-width="170">
          <template slot-scope="{ row }">
            {{ row.createTime | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          :formatter="formatStatus"
          label="状态"
          width="80"
        ></el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="{ row }">
            <el-button type="text" @click="btnPreview(row)">预览</el-button>
            <el-button type="text" @click="showState(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state !== 1"
              @click="editPreview(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state !== 1"
              @click="delPreview(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="->, prev, pager, next, sizes, jumper"
        :current-page="page.page"
        :current-pagesize="page.pagesize"
        :total="page.total"
        @current-change="changePage"
        @size-change="changeSize"
      ></el-pagination>
    </el-card>
    <articles-preview
      :show-preview-dialog.sync="showPreviewDialog"
      :preview="preview"
    ></articles-preview>
    <articles-add
      :show-add-dialog.sync="showAddDialog"
      @getList="getList"
      :addForm.sync="editData"
    />
    <!-- <el-dialog :visible.sync="showVideoDialog" :center="true"  style="">
        <el-button icon="el-icon-close" circle @click="showVideoDialog=false"></el-button>
        <video :src="videoData.videoURL" autoplay="autoplay" width="600" height="400" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
    </el-dialog> -->
    <div v-show="showVideoDialog" class='popContainer'>
      <div class="video">
        <el-button class="btn" icon="el-icon-close" circle @click="showVideoDialog=false"></el-button>
        <video :src="videoData.videoURL" autoplay="autoplay" width="800" height="600" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants'
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  data () {
    return {
      formInline: {
        keyword: '',
        state: ''
      },
      tableData: [],
      status,
      page: {
        // 放置页码及相关数据
        page: 1, // 当前页
        pagesize: 10, // 每页显示的条数
        total: 0 // 记录总数
      },
      editData: {},
      showPreviewDialog: false,
      showAddDialog: false,
      showVideoDialog: false,
      preview: {},
      videoData: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      if (this.formInline.keyword) {
        this.page.keyword = this.formInline.keyword
      }
      if (this.formInline.state !== '') {
        this.page.state = this.formInline.state
      }
      const { data } = await list(this.page)
      this.tableData = data.items
      this.page.total = data.counts
    },
    // 分页切换
    changePage (newPage) {
      this.page.page = newPage
      this.getList()
    },
    // 尺码
    changeSize (newpageSize) {
      this.page.page = 1
      this.page.pagesize = newpageSize
      this.getList()
    },
    // 清空输入框
    cls () {
      this.formInline.keyword = ''
      this.formInline.state = ''
      this.page = {
        // 放置页码及相关数据
        page: 1, // 当前页
        pagesize: 10, // 每页显示的条数
        total: 0 // 记录总数
      }
      this.getList()
    },
    // 格式化状态
    formatStatus (row, column, cellValue, index) {
      const obj = status.find((item) => item.value === cellValue)
      return obj ? `已${obj.label}` : '未知'
    },
    // 状态
    async showState (data) {
      try {
        if (data.state === 1) {
          data.state = 0
        } else if (data.state === 0) {
          data.state = 1
        }
        await changeState(data)
        await this.getList()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 预览弹窗
    btnPreview (data) {
      this.preview = data
      this.showPreviewDialog = true
    },
    editPreview (data) {
      this.getList()
      this.editData = data
      console.log(this.editData)
      this.showAddDialog = true
    },
    async delPreview (data) {
      try {
        await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(data)
        this.getList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
    },
    playVideo (data) {
      this.showVideoDialog = true
      this.videoData = data
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card,
.el-message {
  margin: 10px;
  .el-form-item {
    margin-bottom: 18px;
  }
}
.el-icon-film:before {
  font-size: 18px;
}
.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
  .video{
    position: absolute;
    top: 100px;
    left:50%;
    transform: translate(-50%);
    width:800px;
    height: 600px;
    .btn{
      position: absolute;
      top: 0;
      left:50%;
      transform: translate(-50%);
      width:40px;
      height: 40px;
      z-index: 999;
    }
  }
}

</style>
